<template>
	<view class="content">
		<view class="top_swiper">
			<!-- 返回 -->
			<!-- <view class="iconfont back" @click="back">&#xe600;</view> -->
			<swiper class="swiper_index" :indicator-dots="false" @change="change">
				<swiper-item v-for="(item,index) in banner">
					<view class="swiper-item">
						<image class="swiper_pic" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 图片数量 -->
			<view class="currNum">{{currIndex}}/{{banner.length}}</view>
			<view class="swiper_bot">
				<image class="boticon" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/icon1.png" mode=""></image>
				<view class="bottxt">{{startTime}} - {{endTime}}&nbsp;&nbsp;{{auctionDatas.type | filterType}}    </view>
			</view>
		</view>
		<view class="auctionPrice">
			<view class="sign">&#xe604;</view>
			<view class="price">{{auctionDatas.price}}</view>
		</view>
		<view class="goods_name">{{yxAuctionProductDto.title}}</view>
		<view class="goods_introl">{{yxAuctionProductDto.productInfo}}</view>
		<view class="goods_detail">商品详情</view>
		<view class="detail_cont">
			<rich-text :nodes="productDetail"></rich-text>
		</view>
		
		<view class="fixed">
			<view class="fixedcont">
				<view class="ficedfl" @click="popup">
					<image class="iconservice" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/service.png" mode=""></image>
					<view class="servicetxt">客服</view>
				</view>
				<!-- 是否是自己拍到 -->
				<view :class="['fixed_user',{fixed_curr:auctionDatas.yxAuctionOrder.isMax == 1}]" v-if="auctionDatas.type == 6">
					<view class="takegoods" @click="goTakeGoods(auctionDatas.yxAuctionOrder)">立即提货</view>
					<view class="sponsor" v-if="auctionDatas.yxAuctionOrder.isMax == 0" @click="getSponsor(auctionDatas.yxAuctionOrder)">发起转拍</view>
				</view>
				<view v-else class="fixedfr" @click="test ? getOperate(auctionDatas.type,auctionDatas.id) : ''">
				{{auctionDatas.type | filterResult}}</view>
			</view>
		</view>
		
		<!-- 拨打客服电话 -->
		<!-- <view class="tuiPop" v-show="popupShow == true" @click="close"></view>
		<view class="tuipopcont" v-show="popupShow == true">
			<view class="getPhone" @click="goPhone(phone)"><text style="color: #333333;">拨打电话：</text>{{phone}}</view>
			<view class="cancel" @click="close">取消</view>
		</view> -->
		
		<!-- 客服电话 -->
		<uni-popup ref="popup1" type="center" :maskClick="false">
			<view class="customer">
				<view class="title">客服微信</view>
				<view class="phone">联系电话：{{phone}}</view>
				<view class="tuiimg">
					<image class="tuipic" :src="datasImg" mode=""></image>
					<view class="tuipic_txt">客服微信</view>
				</view>
				<view class="sure" @click="cancel">知道了</view>
			</view>
		</uni-popup>
		
		<!-- 商品已拍完提示 -->
		<view class="" @touchmove.stop.prevent="moveHandle">
			<uni-popup ref="popup" type="bottom" >
				<view class="uni-bottom">
					<view class="uni-icon">
						<image class="uni-close" @click="closePopup" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/close.png" mode=""></image>
					</view>
					<view class="uni-tip">很遗憾～抢拍失败</view>
					<view class="tip_txt">去看看其他拍品吧</view>
					<view class="uni-button">
						<view class="button" @click="navback">返回拍卖</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 抢拍协议 -->
		<view class="" @touchmove.stop.prevent="moveHandle">
			<uni-popup ref="popup2" type="center" :maskClick="false">
				<view class="uni-center">
					<view class="title">用户拍卖说明</view>
					<view class="con_title">尊敬的优集聚云拍用户：</view>
					<view class="content">
						<view class="t_con">
							感谢您选择优集聚云拍, 我们非常重视您的个人信息。为了更好的保护您的个人权益，在您操作之前请仔细阅读
							《<text @click.stop="protocol(5)">拍卖协议</text>》所有条款。主要内容如下：
						</view>
						<view class="con_first">1.明确了拍卖的各项条款</view>
						<view class="con_first">2.说明各项条款的明细</view>
						<view class="btn_con">
							<view class="reject_btn" @click="checked(1,auctionDatas)">不同意</view>
							<view class="aggrement_btn" @click="checked(2,auctionDatas)">同意</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import uniPopup from "../../../../components/uni-popup/uni-popup.vue"
	import api from "../../../../common/api/api.js"
	export default {
		components: {uniPopup},
		data() {
			return {
				content:'',
				popupShow:false,
				id:'',
				auctionDatas:{},
				banner:[],
				currIndex:1,
				yxAuctionProductDto:{},
				phone:'',
				productDetail:'',
				endTime:'',
				startTime:'',
				tipTxt:'' ,// 提示文字
				userInfo:{},
				test:true,
				datasImg:'',
				
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.startTime = options.startTime;
			this.endTime = options.endTime;
			this.getDetailInfo()
			this.getTipTxt();
			let that = this;
			uni.$on('goTake',function(data){
			    console.log('监听到事件来自 goTake ，携带参数 msg 为：' + data.msg);
				that.getDetailInfo()
			})
			uni.$on('login',function(data){
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
				that.getUserInfo()
			})
			that.getUserInfo();
		},
		onUnload() {
			uni.$off('goTake')
			uni.$off('login')
		},
		filters:{
			filterType: function (e) {
				if (e == 1) {
					return '未开始'
				} else if (e == 2) {
					return '正在进行'
				} else {
					return '拍卖已经结束'
				}
			},
			filterResult: function (e) {
				if (e == 1) {
					return '未开始'
				} else if (e == 2) {
					return '正在进行'
				} else if (e == 3){
					return '已拍完'
				} else if (e == 4) {
					return '待付款'
				} else if (e == 5) {
					return '卖家待确认'
				} else if (e == 7) {
					return '确认收货'
				}else if (e == 8) {
					return '已结束'
				} else if (e == 9) {
					return '买家已付款、等待您确认'
				}
			}
		},
		methods: {
			// 轮播改变
			change: function (e) {
				// console.log(e)
				this.currIndex = e.detail.current + 1
			},
			// 返回
			back: function () {
				uni.navigateBack({
					delta: 1
				});
			},
			// 抢拍操作
			getOperate: function (type,id) {
				let that = this;
				if (type == 1) {  
					that.tui.toast('抢拍未开始');
					return
				} else if (type == 2) {  //正在进行
					let tipTxt = that.tipTxt;
					that.test = false;
					uni.showModal({
						content: tipTxt,
						confirmText: '取消',
						cancelText: '确认',
						success: res => {
							if (res.confirm) {
								console.log(res.confirm)
								that.test = true;
							}
							if (res.cancel) {
								console.log("点击次数----")
								api.startSnapping(id).then(res => {
									console.log(res,"===========")
									that.test = true;
									that.tui.toast(res.msg);
									let price = res.data.price
									let yxId = res.data.yxAuctionRecordId;  // 抢单ID
									let yxAuctionOrderId = res.data.yxAuctionOrderId;  // 买单id
									let times = res.data.times;
									setTimeout(function () {
										uni.$emit('goTake',{msg:'页面更新'});
										uni.$emit('update',{msg:'页面更新'})
										uni.$emit('billOrder',{msg:'更新买单'})
									},500)
									setTimeout(function () {
										uni.navigateTo({
											url: `../auctionPayment/auctionPayment?money=${price}&id=${yxId}&buyId=${yxAuctionOrderId}&times=${times}`,
										});
									},600)
									
								}).catch(err => {
									console.log(err)
									that.test = true;
									that.tui.toast(err.msg)
									that.$refs.popup.open()
									return
								})
							}
							
						},
						fail: () => {},
						complete: () => {}
					});
				
					
				} else if (type == 3) {
					that.tui.toast('已抢完');
					return
				} else if (type == 4) {  // 待付款
					let yxAuctionOrderId = that.auctionDatas.yxAuctionOrder.id;  // 买单id
					let yxPrice = that.auctionDatas.price;   // 待付款
					uni.navigateTo({
						url: `../auctionPayment/auctionPayment?money=${yxPrice}&id=${id}&buyId=${yxAuctionOrderId}`
					});
				} else if (type == 5) {  //  待卖家确定
					that.tui.toast('等待卖家确认');
					return
				} else if (type == 7) {  //  确认收货
					let yxAuctionOrderId = that.auctionDatas.yxAuctionOrder.id;  // 买单id
					api.userGetConfirm(yxAuctionOrderId).then(res => {
						console.log(res)
						that.tui.toast(res.data);
						setTimeout(function () {
							uni.$emit('goTake',{msg:'页面更新'});
							uni.$emit('update',{msg:'页面更新'})
							uni.$emit('billOrder',{msg:'页面更新'})
						},500)
					})    
				} else if (type == 8) {  //  已结束
					that.tui.toast('已结束');
					return
				} else if (type == 9) {  //  转拍待确认
					uni.navigateTo({
						url: '../../user/userSaleBill/homeSureOrder/homeSureOrder?id=' + that.id,
					});
				} 
				
			},
			// 点击获取客服电话
			popup: function() {
				this.getPhone()
				this.$refs.popup1.open();
				// this.popupShow = !this.popupShow
			},
			cancel: function () {
				this.$refs.popup1.close();
				// this.popupShow = !this.popupShow
			},
			// 发起转拍
			getSponsor: function (yxAuctionOrder) {
				console.log(yxAuctionOrder)
				this.$refs.popup2.open();
				// let userInfo = this.userInfo;
				// if ( userInfo.bindWx != 0 && userInfo.bindZfb != 0) {
				// 	uni.navigateTo({
				// 		url: '../sponsorPay/sponsorPay?serviceMoney=' + yxAuctionOrder.serviceMoney + '&id=' + yxAuctionOrder.id,
				// 	});
				// } else {
				// 	this.tui.toast("没有绑定支付宝、微信支付")
				// 	setTimeout(function () {
				// 		uni.navigateTo({
				// 			url: '../../user/paymentSetting/paymentSetting',
				// 		});
				// 	},1500)
				// 	return
				// }
				
			},
			// 立即收获
			goTakeGoods: function (yxAuctionOrder) {
				uni.navigateTo({
					url: '../sureAuctionOrder/sureAuctionOrder?id=' + yxAuctionOrder.id,
				});
			},
			// 获取详情
			getDetailInfo: function () {
				api.homeAuctionDeatil(this.id).then(res => {
					console.log(res)
					let datas = res.data;
					if (datas.yxAuctionProductDto.slideImg != '') {
						this.banner = datas.yxAuctionProductDto.slideImg.split(";")
					} else {
						this.banner = []
					}
					this.yxAuctionProductDto = datas.yxAuctionProductDto;
					let detail = datas.yxAuctionProductDto.productDetail.replace(/[ \t]*width[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					let details = detail.replace(/[ \t]*height[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					this.productDetail = details.replace(/<img /g, '<img width="100%" style="vertical-align:top;"');
					this.auctionDatas = datas;
					
				})
			},
			// 获取客服电话
			getPhone: function () {
				let code = 'kfdh'
				api.getServiceTel(code).then(res => {
					console.log(res)
					this.phone = res.data.memo;
					this.datasImg = res.data.images;
				})
			},
			// 拨打电话
			goPhone: function (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			moveHandle: function () {
				return;
			},
			// 关闭提示窗
			closePopup: function () {
				this.$refs.popup.close()
				
			},
			// 返回拍卖
			navback: function () {
				this.$refs.popup.close()
				setTimeout(function () {
					uni.$emit('update',{msg:'页面更新'})
					uni.navigateBack({
						delta: 1
					});
				},500)
			},
			// 获取
			getTipTxt: function () {
				let code = 'message';
				api.getServiceTel(code).then(res => {
					console.log(res,"getTipTxt----");
					this.tipTxt = res.data.memo
				})
			},
			// 获取我的信息
			getUserInfo: function () {
				api.getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data.yxUserinfo;
				})
			},
			/* 拍卖协议 */
			protocol: function (type) {
				uni.navigateTo({
					url: '../../login/potocol/potocol?type=' + type,
				});
			},
			// 同意
			checked: function (value,auctionDatas) {
				if (value == 1) {
					this.$refs.popup2.close()
					return;
				} else if (value == 2) {
					this.$refs.popup2.close()
					let userInfo = this.userInfo;
					let yxAuctionOrder = auctionDatas.yxAuctionOrder
					if ( userInfo.bindWx != 0 && userInfo.bindZfb != 0) {
						uni.navigateTo({
							url: '../sponsorPay/sponsorPay?serviceMoney=' + auctionDatas.serviceCharge + '&id=' + yxAuctionOrder.id,
						});
					} else {
						this.tui.toast("没有绑定支付宝、微信支付")
						setTimeout(function () {
							uni.navigateTo({
								url: '../../user/paymentSetting/paymentSetting',
							});
						},1500)
						return
					}
				}
			} 
			
			
		} 
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #212121;
		background: #FFFFFF;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top_swiper {
		width: 100%;
		box-sizing: border-box;
		// height: 750rpx;
		position: relative;
		.swiper_index {
			width: 100%;
			box-sizing: border-box;
			height: 750rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				.swiper_pic {
					width: 100%;
					height: 100%;
				}
			}
		}
		.back {
			font-size: 70rpx;
			position: absolute;
			left: 20rpx;
			top: 60rpx;
			z-index: 15;
			color: rgba(0, 0, 0, 0.41);
		}
		.currNum {
			position: absolute;
			right: 20rpx;
			bottom: 80rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			width: 80rpx;
			line-height: 35rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 9rpx;
			z-index: 15;
		}
		.swiper_bot {
			width: 100%;
			box-sizing: border-box;
			line-height: 72rpx;
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 15;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 36rpx;
			.boticon {
				width: 28rpx;
				height: 28rpx;
			}
			.bottxt {
				width: calc(100% - 28rpx);
				box-sizing: border-box;
				padding-left: 20rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
	}
	.auctionPrice {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 36rpx;
		line-height: 87rpx;
		color: #E42221;
		font-size: 62rpx;
		display: flex;
		justify-content: flex-start;
		.sign {
			padding-top: 10rpx;
			font-size: 32rpx;
			color: #FFDA71;
		}
		
	}
	.goods_name {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx 40rpx 36rpx;
		border-bottom: 2rpx solid #F3F6F6;
		font-weight: 500;
	}
	.goods_introl {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 36rpx;
		font-size: 26rpx;
		color: #212121;
	}
	
	.goods_detail {
		width: 100%;
		box-sizing: border-box;
		line-height: 64rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		background: #F5F5F5;
	}
	.detail_cont {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 150rpx 20rpx;
	}
	.fixed {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 16rpx 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.fixedcont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			.fixedfr {
				width: 552rpx;
				line-height: 82rpx;
				background: #E42221;
				color: #FFFFFF;
				text-align: center;
				border-radius: 8rpx;
			}
			.fixed_user {
				width: 552rpx;
				line-height: 82rpx;
				text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				&.fixed_curr {
					justify-content: flex-end;
				}
				.sponsor {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #E42221;
					border-radius: 8rpx;
					color: #FFFFFF;
					background: #E42221;
				}
				.takegoods {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #C7973B;
					border-radius: 8rpx;
					color: #C7973B;
				}
				
				
			}
			.ficedfl {
				width: calc(100% - 552rpx);
				box-sizing: border-box;
				text-align: center;
				.iconservice {
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
				}
				.servicetxt {
					font-size: 22rpx;
					color: #666666;
					line-height: 30rpx;
				}
				
			}
		}
		
	}
	.tuiPop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 996;
		transition: all 0.3s ease-in-out;
	}
	.tuipopcont {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
		// transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		padding: 30rpx;
		.cancel {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
		}
		.getPhone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	// 弹窗
	.uni-bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		text-align: center;
		.uni-icon {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-end;
			.uni-close {
				width: 50rpx;
				height: 50rpx;
			}
		}
		.uni-tip {
			width: 100%;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #140005;
			line-height: 60rpx;
		}
		.tip_txt {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			
		}
		.uni-button {
			width: 100%;
			box-sizing: border-box;
			padding: 180rpx 30rpx 0 30rpx;
			.button {
				width: 100%;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #FFFFFF;
				background: #E42221;
				line-height: 94rpx;
				text-align: center;
				border-radius: 8rpx;
			}
		}
		
		
	}
	
	// 弹窗
	.customer {
		width: 580rpx;
		box-sizing: border-box;
		// background: url(../../..//popup.png) no-repeat;
		background-size: 100%;
		border-radius: 16rpx;
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx;
	
		.title {
			width: 100%;
			box-sizing: border-box;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #212121;
		}
	
		.phone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 34rpx;
			color: #E42221;
			line-height: 50rpx;
		}
	
		.tuiimg {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
			text-align: center;
			border-radius: 10rpx;
		
			.tuipic {
				width: 220rpx;
				height: 220rpx;
			}
		}
	
		.sure {
			width: 260rpx;
			line-height: 60rpx;
			background: linear-gradient(to right, #DE3143, #E42221);
			text-align: center;
			margin: 10rpx auto;
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	
	}
	
	.uni-center {
		width: 650rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		// text-align: center;
		
		.title{
			font-size: 31rpx;
			font-weight: bold;
			height: 68rpx;
			line-height: 68rpx;
		}
		.con_title{
			height: 68rpx;
			font-size: 29rpx;
			line-height: 68rpx;
		}
		.content{
			background-color: #FFFFFF;
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			.t_con{
				line-height: 48rpx;
				font-size: 29rpx;
				text{
					color: #E42221;
				}
			}
			.con_first{
				line-height: 68rpx;
			}
			.btn_con{
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					width: 250rpx;
					text-align: center;
					font-size: 29rpx;
					letter-spacing: 5rpx;
					line-height: 80rpx;
					color: #FFFFFF;
					border-radius: 12rpx;
					margin-top: 80rpx;
				}
				.reject_btn{
					background-color: #999999;
				}
				.aggrement_btn{
					background-color: #E42221;
				}
			}
		}
		
	}
	
	
	
	
	
	
	

</style>
